import { Link } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from 'axios';

import { Avatar, Space } from 'antd-mobile'
// 申请人组件：头像+昵称
const PostApply = ({ authorID }) => {
  const [author, setAuthor] = useState({});

  useEffect(() => {
    const getAuthor = async () => {
      try {
        const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/users/${authorID}`);

        setAuthor(response?.data);

      } catch (error) {
        console.log(error);
      }
    };

    getAuthor();
  }, [authorID]);

  return (
    <Link to={`/user/${authorID}`} className='post__author'>

      <Space direction='vertical' align="center">
        <Avatar style={{ '--size': '64px' }} src={`${process.env.REACT_APP_ASSETS_URL}/uploads/${author.avatar}`} alt="" />
        <span className="nickname">
          {author.name}
        </span>
      </Space>


    </Link>
  );
};

export default PostApply;

